<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Draft Tree</title> 
 
<!-- CSS Files --> 
<link type="text/css" href="jit/base.css" rel="stylesheet" /> 
<link type="text/css" href="jit/Spacetree.css" rel="stylesheet" /> 
<!-- jQuery -->
 
<meta http-equiv="Content-script-type" content="text/javascript" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<!-- JIT Library File --> 
<script language="javascript" type="text/javascript" src="jit/jit-yc.js"></script> 

<!-- Include different space trees depending on viewing frome Chrome or from Android WebView with Aublog appended to the user Agent -->
<script language="javascript" type="text/javascript" >
			$(document).ready(function() {
		var downclick;
		var upclick;
		var longclick;
		$(document)[0].oncontextmenu = function() {
			return false;
		}

		$("#infovis").delegate('.node', 'mousedown', function(e) {
			var d = new Date();
			downclick = d.getTime();
			e.stopPropagation()
			//alert('mouse down!'); 
			//return false;

		});
		$("#infovis").delegate('.node', 'mouseup', function(e) {
			var d = new Date();
			upclick = d.getTime();
			e.stopPropagation();
			longclick=upclick-downclick;
			//alert('mouse up!' + longclick );
			//return false;

		});
	});

	/*
	this function is only called in the web version of the sript
	*/
	function loadDraftsData(){
		var nonstringdata = document.getElementById('dataarea').value;
		nonstringdata= nonstringdata.replace(/id: /g,'"id":');
		nonstringdata= nonstringdata.replace(/name: /g,'"name":');
		nonstringdata= nonstringdata.replace(/hidden: /g,'"hidden":');
		nonstringdata= nonstringdata.replace(/data: /g,'"data":');
		nonstringdata= nonstringdata.replace(/children: /g,'"children":');
		nonstringdata= nonstringdata.replace(/{ content:/g,'{"content":');
		//remove trailing ;
		nonstringdata= nonstringdata.replace(/};/g,'}');
		nonstringdata= nonstringdata.replace(/\n/g,'');
		nonstringdata= nonstringdata.replace(/  */g,' ');
		nonstringdata= nonstringdata.replace(/ ]/g,']');
		nonstringdata= nonstringdata.replace(/} ,{/g,'},{');
		nonstringdata= nonstringdata.replace(/^ /g,'');
		nonstringdata='{"id":"1","name":"Root","hidden":"0","data":{"content":"empty"},"children":['+nonstringdata+']}';
		document.getElementById('dataarea').value = nonstringdata;
		//A JSON parser will recognize only JSON text, rejecting all scripts. 		
		var tempdata = JSON.parse(nonstringdata);
		init(tempdata);
		//alert(tempdata);
	}
	function isNativeApp() {
	    return /AuBlog\/[0-9\.]+$/.test(navigator.userAgent);
	}
	if( isNativeApp() ) {
		//http://stackoverflow.com/questions/2314886/how-can-i-debug-javascript-on-android
		console.error('1');
		console.info('2');
		console.log('3');
	 	console.warn('4');
		 
	    function showAndroidToast(toast) {
			Android.showToast("Toast:"+toast);
	    }
	    function editId(id){
	    	Android.editId(id);
	    }
	    function deleteId(id){
	    	Android.deleteId(id);
	    }
	    function loadJsonData(){
	    	 Android.loadData();
	    }
	    function refreshTree(){
	    	Android.refreshTree();
	    }
	    function exportTree(){
	    	Android.exportTree();
	    }
		//addJavascript('/mnt/sdcard/Android/data/ca.ilanguage.aublog/files/draft_space_tree.js','head');
		//http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file
		$.getScript("/mnt/sdcard/Android/data/ca.ilanguage.aublog/files/draft_space_tree.js", function(){
			/*
			TODO bug returned on motorla xoom running Android 3.x even with the finsihed loading dialog, it still cant load the javascript first. 
			the webkit must running async tasks differently...
			*/
			//alert("Finished loading.");
			   // here you can use anything you defined in the loaded script
				init();
			});
	}else{
		$.getScript("draft_space_tree.js", function(){
			   //alert("Loaded in Browser mode.");
			   // here you can use anything you defined in the loaded script
				
				document.getElementById('dataarea').value = JSON.stringify(draftData);
				//dont initialize the tree, let the user click on the load tree button
				//init(draftData);
				//loadDraftsData();
				
			});
	}
	
</script>
 

</head> 
 
<body > 


<div id="container">
 
<div id="left-container"> 
 <h3>Draft Tree</h3>
 
<!-- Didnt need anymore on 2.x, javascript was loading in sequential order but in 3.x it is not-->
<input type="button" value="Refresh" onClick="refreshTree()" />
<input type="button" value="Export/Email..." onClick="exportTree()" />
<!-- TODO Itteration 3 add button "Hide Deleted Nodes" -->
<h4>Tree Orientation</h4> 
<table> 
    <tr> 
         <td> 
            <label for="r-top">Top </label> 
         </td> 
         <td> 
            <input type="radio" id="r-top" name="orientation" checked="checked" value="top"   /> 
         </td> 
    </tr> 
    <tr> 
        <td> 
            <label for="r-left">Left </label> 
        </td> 
        <td> 
            <input type="radio" id="r-left" name="orientation"  value="left" /> 
        </td> 
    </tr> 

    <tr> 
         <td> 
            <label for="r-bottom">Bottom </label> 
          </td> 
          <td> 
            <input type="radio" id="r-bottom" name="orientation" value="bottom" /> 
          </td> 
    </tr> 
    <tr> 
          <td> 
            <label for="r-right">Right </label> 
          </td> 
          <td> 
           <input type="radio" id="r-right" name="orientation" value="right" /> 
          </td> 
    </tr> 

</table> 
 <!-- 
 <h4>Selection Mode</h4> 
<table> 
    <tr> 
        <td> 
            <label for="s-normal">Normal </label> 
        </td> 
        <td> 
            <input type="radio" id="s-normal" name="selection" checked="checked" value="normal"   /> 
        </td> 
    </tr> 
    <tr> 
         <td> 
            <label for="s-root">Set as Root </label> 
         </td> 
         <td> 
            <input type="radio" id="s-root" name="selection" value="root" /> 
         </td> 
    </tr> 
</table> 
-->
</div> 

<div id="center-container"> 

 
    <div id="infovis" ></div>    
    
<div id="log"></div> 
</div> 

</div>

<div id="jsondata">
<p>
Paste your exported text here.
<input type="button" value="Load Tree..." onClick="loadDraftsData()" /><p>
<textarea id="dataarea" style="margin-left: 2px; margin-right: 2px; width: 627px; margin-top: 2px; margin-bottom: 2px; height: 559px; ">
</textarea>
</div>
</body> 
</html>
